<template>
  <j-modal
    width="80%"
    :title="formData.cashType === '1' ? '收入' : '支出'"
    :maskClosable="false"
    :fullscreen.sync="fullscreen"
    :switch-fullscreen="switchFullscreen"
    :destroyOnClose="true"
    :visible.sync="editModalVisible"
    @cancel="handleCancleDbSync"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    :bodyStyle="{paddingTop:'0px'}"
  >
  <template slot="footer">
    <div style="text-align:right;">
      <a-button @click="handleCancleDbSync">关闭</a-button>
      <a-button type="primary" :loading="syncLoading" :disabled="disableSubmit" @click="handleOk">确定</a-button>
    </div>
  </template>
  <div class="table-page-search-wrapper warp">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="formData" :rules="rules">
        <a-row :gutter="24">
          <a-col :xl="8" :lg="8" :md="8" :sm="24" >
            <a-form-model-item label="收支编码" prop="cashCode">
              <a-input class="input-item" disabled v-model="formData.cashCode" placeholder="请输入收支编码"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" >
            <a-form-model-item label="业主信息">
              <j-popup
                v-model="formData.ownerCode"
                :disabled="disableSubmit"
                org-fields="owner_code"
                dest-fields="ownerCode"
                field="ownerCode"
                code="v_xy_park_owner"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" >
            <a-form-model-item label="收支属性" prop="cashType">
              <j-dict-select-tag
                disabled
                v-model="formData.cashType"
                placeholder="请选择收支属性"
                dict-code="xy_park_cash_type"
              >
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" >
            <a-form-model-item label="发生金额" prop="amount">
              <a-input-number class="input-item" :disabled="disableSubmit" v-model="formData.amount" placeholder="请输入发生金额"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24">
            <a-form-model-item label="手续费">
              <a-input-number class="input-item" :disabled="disableSubmit" v-model="formData.fee" placeholder="请输入手续费"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24">
            <a-form-model-item :label="formData.cashType === '1'?'到账金额':'支出金额'">
              <a-input-number class="input-item" :disabled="disableSubmit" v-model="formData.actualAmount" placeholder="请输入到账金额"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24">
            <a-form-model-item label="缴款日期"  prop="paymentDate">
              <a-date-picker class="input-item" showTime :disabled="disableSubmit" v-model="formData.paymentDate" placeholder="请选择缴款日期"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" >
            <a-form-model-item label="到账日期" prop="arrivalDate">
              <a-date-picker class="input-item" showTime :disabled="disableSubmit" v-model="formData.arrivalDate" placeholder="请选择到账日期"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24">
            <a-form-model-item label="收支方式" prop="cashMethod">
              <j-dict-select-tag
                :disabled="disableSubmit"
                v-model="formData.cashMethod"
                placeholder="请选择收支方式"
                dict-code="xy_park_cash_method"
              >
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" >
            <a-form-model-item label="联系人">
              <a-input class="input-item" :disabled="disableSubmit" v-model="formData.planName" placeholder="请输入联系人"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" >
            <a-form-model-item label="对方账号">
              <a-input class="input-item" :disabled="disableSubmit" v-model="formData.accountCode" placeholder="请输入对方账号"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" >
            <a-form-model-item label="凭证号" >
              <a-input class="input-item" :disabled="disableSubmit" v-model="formData.voucherNo" placeholder="请输入凭证号"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24">
            <a-form-model-item label="收据编号" >
              <a-input class="input-item" :disabled="disableSubmit" v-model="formData.receiptNo" placeholder="请输入收据编号"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24">
            <a-form-model-item label="收支账户" prop="customerAccount">
              <j-popup
                v-model="formData.customerAccount"
                :disabled="disableSubmit"
                org-fields="park_number"
                dest-fields="customerAccount"
                field="customerAccount"
                code="v_xy_park_account"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" v-if="formData.cashType === '1'">
            <a-form-model-item label="开票日期" >
              <j-date class="input-item" :disabled="disableSubmit" v-model="formData.invoiceDate" placeholder="请选择开票日期"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="16" :lg="16" :md="16" :sm="24">
            <a-form-model-item label="备注">
              <a-textarea :rows="2" :disabled="disableSubmit" v-model="formData.remark" placeholder="备注"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </j-modal>
</template>
<script>
import { postAction, putAction } from '@/api/manage'
import { getSn } from '@/api/api'
import moment from 'moment'
import JDate from '@/components/jeecg/JDate.vue'
export default {
  name: 'BillListModal',
  components: {
    JDate
  },
  data() {
    return {
      editModalVisible: false,
      disableSubmit: false,
      syncLoading: false,
      url: {
        add: '/community/cash/add',
        edit: '/community/cash/edit'
      },
      fullscreen: false,
      switchFullscreen: false,
      formData: {},
      rules: {
        cashCode: [
          { required: true, message: '请输入流水编号', trigger: 'blur' }
        ],
        planCode: [
          { required: true, message: '请选择发生对象', trigger: 'blur' }
        ],
        cashType: [
          { required: true, message: '请选择收支属性', trigger: 'blur' }
        ],
        amount: [
          { min: 0, type: 'number', message: '数字必须大于0' },
          { required: true, message: '请输入金额', trigger: 'blur' }
        ],
        paymentDate: [
          { required: true, message: '请选择缴款日期', trigger: 'change' }
        ],
        arrivalDate: [
          { required: true, message: '请选择到账日期', trigger: 'change' }
        ],
        cashMethod: [
          { required: true, message: '请选择收支方式', trigger: 'change' }
        ],
        customerAccount: [
          // { validator: (rule, value, callback) => validateDuplicateValue('hr_assessment_plan', 'plan_code', value, this.formData.id, callback) }
          { validator: (rule, value, callback) => {
            if (this.formData.cashMethod === '2' && !value) {
              callback('请选择收支账户')
            }
            callback()
          } }
        ]
      },
      snCode: 'XYLS-${YYYY}-${MM}###'
    }
  },
  methods: {
    edit(data) {
      this.formData = data
      // this.title = data.cashType === '1' ? '收入' : '支出'
      this.editModalVisible = true
    },
    add(type) {
      getSn(this.snCode, {}).then(res => {
        if (res.success) {
          this.editModalVisible = true
          this.$nextTick(() => {
            this.formData = { cashCode: res.result, cashType: type }
            this.editModalVisible = true
          })
        }
      })
      // this.title = type === '1' ? '收入' : '支出'
    },
    handleCancleDbSync() {
      this.close()
    },
    close() {
      this.$refs.ruleForm.resetFields()
      this.formData = {}
      this.editModalVisible = false
    },
    handleOk() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.updateData()
        } else {
          // throw new Error('error submit!!')
          return false
        }
      })
    },
    updateData() {
      this.formData.paymentDate = moment(this.formData.paymentDate).format('YYYY-MM-DD hh:mm:ss')
      this.formData.arrivalDate = moment(this.formData.arrivalDate).format('YYYY-MM-DD hh:mm:ss')
      if (this.formData.id) {
        putAction(this.url.edit, this.formData).then(res => {
          if (res.success) {
            this.close()
            this.$emit('ok')
          }
        })
      } else {
        postAction(this.url.add, this.formData).then(res => {
          if (res.success) {
            this.close()
            this.$emit('ok')
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.input-item{
  width:100%;
}
</style>
